<template>
  <uni-popup ref="popup" type="bottom" backgroundColor="#fff" @mask-click="handleConfirm">
    <view class="flex-col bg-white content-wrap popup-content">
      <view class="flex-row align-center justify-between lineBottom10" style="padding: 20rpx">
        <text @click="handleReset">重置</text>
        <text @click="handleConfirm" class="text-blue">确定</text>
      </view>
      <view class="popup-content">
        <view class="lineBottom10 flex-col search-item">
          <text>预警状态</text>
          <view class="flex-row bottom10 flex-wrap">
            <uni-tag
              style="margin-right: 10px; margin-top: 5px"
              @click="statusClick(index, item)"
              :inverted="!item.check"
              :circle="true"
              v-for="(item, index) in dict.type.warning_state_type"
              :text="item.label"
              :key="item.value"
              type="success"
            />
          </view>
        </view>

        <view class="lineBottom10 flex-col search-item">
          <text>车架号</text>
          <view style="margin: 10rpx 0">
            <uni-easyinput style="margin: 10rpx 0" type="text" v-model="ruleForm.vinNo" placeholder="请输入车架号" />
          </view>
        </view>

        <linkageSelect ref="refLinkageSelect" @change="handleLinkageSelect" />

        <view class="lineBottom10 flex-col search-item">
          <text>排放标准</text>
          <view style="margin: 10rpx 0">
            <uni-easyinput style="margin: 10rpx 0" type="text" v-model="ruleForm.environmentalStandards" placeholder="请输入排放标准" />
          </view>
        </view>

        <view class="lineBottom10 flex-col search-item">
          <text>车辆产权</text>
          <view style="margin: 10rpx 0">
            <uni-easyinput style="margin: 10rpx 0" type="text" v-model="ruleForm.propertyRightName" placeholder="请输入车辆产权" />
          </view>
        </view>
        <view class="lineBottom10 flex-col search-item">
          <text>预警生成时间</text>
          <view style="margin: 10rpx 0">
            <uni-datetime-picker v-model="valueDate" type="daterange" @change="maskClick" />
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: 'conditionSearch', //弹框搜索
  dicts: ['vehicle_condition_level_type', 'warning_state_type'],
  props: {
    value: {
      type: Object,
      default: {},
    },
  },
  computed: {
    ruleForm: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      },
    },
  },
  watch: {},
  data() {
    return {
      valueDate: [],
    }
  },
  methods: {
    //打开弹框
    open() {
      this.$refs.popup.open()
    },

    //确定
    handleConfirm() {
      this.$emit('confirm', this.ruleForm)
      this.$refs.popup.close()
    },

    //重置
    handleReset() {
      this.$refs.refLinkageSelect.reset()
      this.dict.type.warning_state_type.forEach((item) => (item.check = false))
      this.$refs.popup.close()
      this.$emit('reset')
    },

    //工单状态
    statusClick(index, val) {
      this.dict.type.warning_state_type.forEach((item, i) => {
        if (index === i) {
          item.check = !item.check
        } else {
          item.check = false
        }
      })
      this.$set(this.ruleForm, 'warningState', val.value)
      this.value.warningState = this.ruleForm.warningState = val.value
      this.$forceUpdate()
    },

    //品牌/车系/车型
    handleLinkageSelect(val) {
      this.$set(this.ruleForm, 'brandId', val.brandId)
      this.$set(this.ruleForm, 'seriesId', val.seriesId)
      this.$set(this.ruleForm, 'modelId', val.modelId)
      this.value.brandId = this.ruleForm.brandId = val.brandId
      this.value.seriesId = this.ruleForm.seriesId = val.seriesId
      this.value.modelId = this.ruleForm.modelId = val.modelId
    },

    //申请时间
    maskClick(val) {
      console.log(val, '000')
      if (val) {
        this.$set(this.ruleForm, 'warningStartDate', val && val[0])
        this.$set(this.ruleForm, 'warningEndDate', val && val[1])
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.content-wrap {
  border-radius: 20rpx 20rpx 0 0;
}

.search-item {
  padding: 0 20rpx 10rpx;
}

uni-tag {
  margin: 20rpx 20rpx 10rpx 0;
}

.popup-content {
  overflow: auto;
  max-height: 60vh;
}
</style>
